<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大嘿嘿后台管理</title>
		<link rel="stylesheet" type="text/css" href="css/antd.css"/>
		
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios-0.18.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/interfaceuRL.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
	<style type="text/css">
		table{
			margin-top: 30px;
			width: 100%;
			height: 100%;
			text-align: center;
		}
		.a1{
			display: flex;
			justify-content: space-between;
		}
		.b1{
			border:0.00625rem solid black;
			width: 20px;
			text-align: center;
		}
		.b1 a{
			color: #000000;
		}
	</style>
	<body>
		<div id="app">
		<div>
			<p style="text-align: right;background-color: #f5faff;margin-top:20px;">共{{UserItem.length}} 条记录</p>
		</div>
		<div class="a1">
			<div style="text-align: center;">
				显示 
				<select name=""  class="num" @change="changeSize()">
				<option value="10">10</option>
				<option value="9">9</option>
				<option value="8">8</option>
				<option value="7">7</option>
				<option value="6">6</option>
				<option value="5">5</option>
				<option value="4">4</option>
				<option value="3">3</option>
				<option value="2">2</option>
				<option value="1">1</option>
				</select>
				条
				</div>
			<div colspan="8" style="text-align:right;">从当前数据中检索:<input type="text" id="" value=""  v-model="userkey"/></div>
		</div>
		<table border="" cellspacing="0" cellpadding="">
			
			<tr style="background-color:#f5faff ;font-weight:bold;">
				<td><input type="checkbox" /></td>
				<td style="background-color:#f5faff">用户ID</td>
				<td>用户名</td>
				<td>电话</td>
				<td>邮箱</td>
				<td>操作</td>
			</tr>
			<tr v-for="(item,index) in cc" :key="index">
				<td><input type="checkbox" name="" id="" value=""/></td>
				<td style="background-color: #f5faff;">{{item.uid}}</td>
				<td>{{item.uname}}</td>
				<td>{{item.tel}}</td>
				<td>{{item.email}}</td>
				<td><span class="glyphicon glyphicon-cloud" @click="delEmp(item.uid)"></span></td>
			</tr>
			
		</table>
			
			<!-- 下 分页 -->
					<div id="" style="display: flex;">
						<span style="margin-left: 50px;margin-top: 20px;">
							<span v-if="num==0">没有数据</span>
							<span v-else>显示 {{1+(pageSize*currentPage)}} 到 {{pageSize*(currentPage)+cc.length}}</span>
							， 共 {{num}} 条
						</span>
						<nav aria-label="Page navigation"  style="position: absolute;right: 0px;margin-right: 50px;">
						  <ul class="pagination">
						    <li  @click="prePage()">
						      <a href="#" aria-label="Previous">
						        <span aria-hidden="true">上一页</span>
						      </a>
						    </li>
							</ul>
							
							<ul class="pagination" v-for="index of pageNum" :key="index">
								<li @click="Page(index)"><a href="#">{{index}}</a></li>
							</ul>
							
							<ul class="pagination">
						    <li  @click="nextPage()">
						      <a href="#" aria-label="Next">
						        <span aria-hidden="true">下一页</span>
						      </a>
						    </li>
						  </ul>
						</nav>
						
					</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm=new Vue({
		el:"#app",
		data:{
			userkey:"",
			UserItem:[],
			num:0,
		  // 所有页面的数据
		  totalPage: [],
		  // 每页显示数量
		  pageSize: 5,
		  // 共几页
		  pageNum: 1,
		  // 当前显示的数据
		  dataShow: "",
		  // 默认当前显示第一页
		  currentPage: 0,
			
		},
		
		//在挂载开始之前被调用：相关的渲染函数首次被调用
				beforeMount: function() {
					var _this=this;
					axios({
					   //请求方式，'GET'或者'POST'
					    method: 'POST',
					    //请求地址
					    url: "http://localhost:8080/Blogs_demo/index/userAll"
					}).then(res => {
		                 	_this.UserItem=res.data;
					}).catch(err => {
						alert("服务出错了!")
						
					  });
				
				 },
				
				
						
						computed: {
							 //查询
							cc:function(){
								var _this=this;
								// return this.UserItem.filter(function(val){
								// 	if(val.uname.indexOf(_this.userkey)!=-1){
								// 		return val;
								// 	}
								// 	return ""
								// });
							
						_this.num=0;
											
						mess=[];
						
						 _this.UserItem.filter(function(val){
							
							if(val.uname.indexOf(_this.userkey)!=-1){
								mess.push(val)
								_this.num++
							}
							
						})
						
						// 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
						_this.pageNum = Math.ceil(mess.length / _this.pageSize) || 1;
						
						   for (let i = 0; i < _this.pageNum; i++) {
							  // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
							  // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为3， 则第一页是1-3条，即slice(0,3)，第二页是4-6条，即slice(3,6)...
							  _this.totalPage[i] = mess.slice(_this.pageSize * i, _this.pageSize * (i + 1))
							}
						   // 获取到数据后显示第一页内容
							return _this.totalPage[_this.currentPage];	
					}
					
					},
					//删除
					methods:{
						delEmp:function(uid){
							//将数组中的某行删除						
							var isOk=confirm;
							console.log(uid)
							if(isOk){
								axios({
								   //请求方式，'GET'或者'POST'
								    method: 'GET',
								    //请求地址
								    url:del()+uid
								}).then(res => {
								      	alert(res.data.msg)
										 window.location.reload()
								}).catch(err => {
								 alert("服务出错了!")
									
								  });
							}
							},
							changeSize:function(){
								this.pageSize=$(".num").val();
							},
								Page:function(index) {
								  this.dataShow = this.totalPage[index-1];
								  this.currentPage=index-1;
								},
								// 上一页和下一页
								// 下一页
								nextPage:function() {
								  if (this.currentPage === this.pageNum - 1) return ;
								  this.dataShow = this.totalPage[++this.currentPage];
								},
								// 上一页
								prePage:function() {
								  if (this.currentPage === 0) return ;
								  this.dataShow = this.totalPage[--this.currentPage];
								},
							
							},
							

				
				
	})
</script>